<template>
  <view class="category-page">
    <!-- 头部区域 -->
    <view class="header">
      <view class="header-btn" @click="handleAddCategory">添加分类</view>
      <view class="header-btn" v-if="isSort" @click="confirmSort">
        确认排序
      </view>
    </view>

    <!-- 分类列表区域 -->
    <view class="category-list">
      <view class="list-body">
        <view
          v-for="(category, index) in categoryList"
          :key="index"
          class="category-item">
          <view class="item-left">
            <uni-icons type="list" size="24"></uni-icons>
            <view class="category-avatar">
              <uni-icons type="star" size="24"></uni-icons>
            </view>
          </view>
          <view class="item-right">
            <view class="category-info">
              <text class="category-name">{{ category.classifyname }}</text>
              <uni-tag
                v-if="category.isShow == 'true'"
                type="success"
                text="显示"></uni-tag>
              <uni-tag v-else type="error" text="隐藏"></uni-tag>
            </view>
            <view>
              <uni-icons
                type="compose"
                size="24"
                @click="handleEdit(category)"></uni-icons>
              <uni-icons
                type="trash"
                size="24"
                style="margin-left: 20px; color: #f00"
                @click="handleDelete(category._id)"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 提示文本 -->
    <!-- <view class="tip-text">拖动左侧图标可以调整分类顺序</view> -->

    <uni-pagination
      v-if="categoryList && categoryList.length > 0"
      :current="pageData.page"
      :total="pageData.total"
      :pageSize="pageData.pageSize"
      title="标题文字"
      prev-text="前一页"
      next-text="后一页"
      @change="pageChange" />

    <view class="category-popup" v-if="isShowPopup">
      <view class="popup-content">
        <text class="title">添加分类</text>
        <!-- 分类名称输入 -->
        <view class="form-item">
          <text class="label">分类名称</text>
          <uni-easyinput
            v-model="categoryData.classifyname"
            placeholder="输入分类名称"
            class="input" />
        </view>

        <!-- 前台显示复选框 -->
        <view class="form-item">
          <uni-data-checkbox
            v-model="categoryData.isShow"
            :localdata="[
              { value: 'true', text: '显示' },
              { value: 'false', text: '不显示' },
            ]"></uni-data-checkbox>
        </view>

        <!-- 操作按钮 -->
        <view class="btn-group">
          <view class="btn" @click="handleCancel">取消</view>
          <view class="btn btn-save" @click="handleSave">保存</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import API from "@/api/index.js";

// 定义分类类型
interface Category {
  _id?: string;
  classifyname: string;
  isShow: string;
  sort?: number;
}

//是否正在排序
const isSort = ref(false);

// 响应式数据
const categoryList = ref<Category[]>([]);

//新增和编辑的变量
const isShowPopup = ref(false);
const isEdit = ref(false);
const categoryData = ref<Category>({
  classifyname: "",
  isShow: "true",
});

onMounted(async () => {
  await getCategoryList();
});

//获取分类列表
const getCategoryList = async () => {
  let params: any = {
    page: pageData.value.page,
    pageSize: pageData.value.pageSize,
  };
  const res = await API.category.getCategoryListApi(params);
  if (res.success && res.data.items && res.data.items.length > 0) {
    categoryList.value = res.data.items.map((elem) => {
      return {
        ...elem,
        isShow: elem.isShow.toString(),
      };
    });
    pageData.value.total = res.data.meta.totalItems;
  }
};

//确认排序
const confirmSort = () => {
  uni.showToast({
    title: "确认排序",
    icon: "success",
  });
};

// 处理编辑
const handleEdit = (data: Category) => {
  isEdit.value = true;
  categoryData.value = data;
  isShowPopup.value = true;
};

// 处理删除
const handleDelete = (id: string) => {
  console.log("id", id);
  uni.showModal({
    title: "删除",
    content: "确定删除当前分类",
    success: async (res) => {
      if (res.confirm) {
        // 用户点击了确定按钮，执行跳转等操作
        console.log("用户点击确定,id=", id);
        const res = await API.category.deleteCategoryInfoByIdApi(id);
        if (res.success) {
          await getCategoryList();
        }
      } else if (res.cancel) {
        // 用户点击了取消按钮，执行相应操作
        console.log("用户点击取消");
      }
    },
  });
};

// 处理添加分类按钮点击
const handleAddCategory = () => {
  isEdit.value = false;
  isShowPopup.value = true;
  categoryData.value = {
    classifyname: "",
    isShow: "true",
  };
};

const handleCancel = async () => {
  isShowPopup.value = false;
  await getCategoryList();
};

const handleSave = async () => {
  const params = {
    ...categoryData.value,
    isShow: categoryData.value.isShow === "true", // 字符串转布尔
  };
  if (isEdit.value) {
    const res = await API.category.updateCategoryInfoByIdApi(
      categoryData.value._id,
      params
    );
    if (res.success) {
      uni.showToast({
        title: "编辑成功",
        icon: "success",
      });
      isShowPopup.value = false;
      await getCategoryList();
    }
  } else {
    const res = await API.category.createCategoryApi(params);
    if (res.success) {
      uni.showToast({
        title: "创建成功",
        icon: "success",
      });
      isShowPopup.value = false;
      await getCategoryList();
    }
  }
};

const pageData = ref({
  page: 1,
  total: 0,
  pageSize: 10,
});

//页码修改
const pageChange = async (e) => {
  pageData.value.page = e.current;
  await getCategoryList();
};
</script>

<style lang="scss" scoped>
.category-page {
  padding: 16px;
  background-color: #fff8f0;
  min-height: 100vh;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    .header-btn {
      padding: 5px 10px;
      background-color: #ff8a3c;
      border-radius: 5px;
      color: #fff;
    }
  }

  .category-list {
    .list-body {
      background-color: #fff8f0;
    }
    .category-item {
      display: flex;
      gap: 10px;
      border-bottom: 1px solid #f5f5f5;
      padding: 10px 0px;
      .item-left {
        display: flex;
        align-items: center;
        .category-avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          margin: 0px 12px;
          background-color: #ffe4d6;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .item-right {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .category-info {
          margin-right: 15px;
          .category-name {
            font-size: 16px;
            color: #333;
            margin-right: 8px;
          }
        }
      }
    }
  }

  .tip-text {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-top: 16px;
  }
  .category-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .popup-content {
      width: 90%;
      max-width: 400px;
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

      .title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
        display: block;
      }

      .form-item {
        margin-bottom: 20px;
        .label {
          font-size: 14px;
          color: #666;
          margin-bottom: 8px;
          display: block;
        }

        .input {
          width: 100%;
          border-radius: 4px;
          font-size: 14px;
        }
        .checkbox {
          font-size: 14px;
        }
      }

      .btn-group {
        display: flex;
        justify-content: end;
        gap: 10px;

        .btn {
          padding: 5px 10px;
          border-radius: 5px;
          border: 1px solid #ddd;
        }
        .btn-save {
          color: #fff;
          background-color: #ff8a3c;
        }
      }
    }
  }
}
</style>
